<template>
  <div class="arcade-statics" v-if="staticsData">
    <div class="statics-grid">
      <!-- 参与活动统计 -->
      <div class="statics-item">
        <svg
          width="64"
          height="64"
          viewBox="0 0 64 64"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_2779_2993)">
            <circle cx="32" cy="32" r="32" fill="#E5EEFA" />
            <path
              d="M39.6631 33.252C40.4225 32.4606 41.6501 32.4272 42.458 33.168L43.8799 34.6152C44.2677 34.9856 44.4936 35.4913 44.5098 36.0469C44.5259 36.5688 44.332 37.0903 43.9766 37.4775L43.1045 38.4375L47.4189 42.6465C47.7742 42.9831 47.9837 43.4546 48 43.9932C48.0162 44.5151 47.8223 45.0376 47.4668 45.4248L45.7061 47.3945C45.3506 47.7818 44.8657 48.001 44.3486 48.001C43.8801 48.001 43.4116 47.7986 43.0723 47.4619L38.7578 43.2861L37.8857 44.2461C37.5141 44.667 36.9966 44.9023 36.4473 44.9023C35.9466 44.9022 35.4779 44.7001 35.1064 44.3467L33.6523 42.9326C33.2809 42.5623 33.0713 42.0406 33.0713 41.502C33.039 40.9463 33.2329 40.4246 33.6045 40.0205L39.6631 33.252ZM46.709 16.0479C47.0644 15.9301 47.4525 16.0312 47.7109 16.3174C47.9692 16.6035 48.05 17.0077 47.9209 17.3779L44.5918 27.2275C44.5433 27.4126 44.4304 27.5638 44.2852 27.6816L30.3086 39.5859L30.4541 39.7373C30.8257 40.1245 31.0196 40.6634 30.9873 41.2021C30.9711 41.7408 30.7451 42.2625 30.3574 42.6328L28.9033 44.0469C28.5479 44.4004 28.0633 44.6025 27.5625 44.6025C27.0132 44.6025 26.4956 44.3672 26.124 43.9463L25.252 42.9863L20.9375 47.1953C20.5821 47.532 20.114 47.7177 19.6455 47.7178C19.1285 47.7178 18.6269 47.4988 18.2715 47.0947L16.5107 45.125C16.1715 44.7546 15.9937 44.2494 16.0098 43.7275C16.0259 43.2226 16.236 42.7344 16.6074 42.3809L20.9541 38.1709L20.0811 37.2119C19.3379 36.3701 19.3705 35.0733 20.1621 34.2988L21.6162 32.8848C22.4241 32.144 23.6361 32.1774 24.3955 32.9688L24.6377 33.2383L36.8203 19.3818C36.9334 19.2471 37.0791 19.1462 37.2568 19.0957L46.709 16.0479ZM16.2832 16.5498C16.5417 16.2636 16.9297 16.1625 17.2852 16.2803L26.7373 19.3447C26.915 19.3952 27.0768 19.4962 27.2061 19.6309L30.7764 23.6885L23.5703 31.248L19.6924 27.9482C19.5472 27.8305 19.4504 27.6791 19.3857 27.4941L16.0576 17.627C15.9285 17.2566 16.0248 16.836 16.2832 16.5498Z"
              fill="#4689DC" />
          </g>
          <defs>
            <clipPath id="clip0_2779_2993">
              <rect width="64" height="64" fill="white" />
            </clipPath>
          </defs>
        </svg>

        <div class="statics-title">Number of Arcade Joined</div>
        <div class="statics-number">{{ staticsData.join_count }}</div>
        <div class="statics-desc" :class="{ highlight: isTopGreaterThanTen(staticsData.join_top) }">
          {{ staticsData.join_top ? `Top ${staticsData.join_top}` : '' }}
        </div>
      </div>

      <!-- 获得投票统计 -->
      <div class="statics-item">
        <svg
          width="64"
          height="64"
          viewBox="0 0 64 64"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_2779_25587)">
            <circle cx="32" cy="32" r="32" fill="#F5DDDE" />
            <path
              d="M33.1792 39.8653C33.1242 39.2192 32.5779 38.7145 31.9204 38.7145C31.6374 38.7124 31.3619 38.8083 31.1379 38.9868C30.914 39.1654 30.7547 39.4163 30.6854 39.6994L29.4504 45.8845C29.4096 46.0651 29.3884 46.2499 29.3873 46.4354C29.3873 47.8304 30.5192 48.7992 31.9204 48.7992C33.3217 48.7992 34.4542 47.8304 34.4542 46.4354C34.4535 46.2118 34.424 45.9894 34.3667 45.7739L33.1792 39.8653Z"
              fill="#E64E5B" />
            <path
              d="M42.5211 42.6316C42.3953 42.5181 42.2602 42.416 42.1173 42.3264L37.3992 38.9294C36.9398 38.6326 36.4492 38.6403 36.0929 38.9994C35.9375 39.1519 35.8388 39.3559 35.814 39.5757C35.7892 39.7955 35.8399 40.0174 35.9572 40.2027L39.5197 45.0326C39.6014 45.1494 39.6922 45.2592 39.7912 45.3609C40.4087 46.0721 41.778 46.1113 42.5306 45.3609C43.2729 44.5937 43.2641 43.2336 42.5211 42.6316Z"
              fill="#E64E5B" />
            <path
              d="M46.0666 37.5945H41.2881C40.9793 37.5945 40.6855 37.829 40.6855 38.165C40.6855 38.501 40.8857 38.7145 41.1551 38.8062L45.6628 40.2447C46.3177 40.3994 47.1998 39.8002 47.1998 39.0491C47.1998 38.095 46.6841 37.5945 46.0666 37.5945Z"
              fill="#E64E5B" />
            <path
              d="M23.329 38.165C23.329 37.8185 23.0203 37.5945 22.6878 37.5945H17.9093C17.3074 37.5945 16.7998 38.2651 16.7998 39.0162C16.7998 39.7673 17.6562 40.3994 18.313 40.2447L22.8886 38.8062C23.1865 38.7145 23.329 38.5094 23.329 38.165Z"
              fill="#E64E5B" />
            <path
              d="M26.6086 38.9329L21.8891 42.318C21.7425 42.4029 21.6059 42.5048 21.4819 42.6218C21.3022 42.7943 21.1588 43.0032 21.0607 43.2354C20.9627 43.4676 20.9121 43.7181 20.9121 43.9714C20.9121 44.2247 20.9627 44.4752 21.0607 44.7074C21.1588 44.9396 21.3022 45.1485 21.4819 45.321C21.8523 45.6813 22.3422 45.8821 22.8513 45.8821C23.3604 45.8821 23.8503 45.6813 24.2207 45.321C24.3215 45.2214 24.4125 45.1117 24.4921 44.9934L28.0573 40.1894C28.2948 39.7995 28.2554 39.3158 27.9216 38.9994C27.7457 38.83 27.5173 38.7303 27.2769 38.7182C27.0365 38.706 26.7997 38.7821 26.6086 38.9329Z"
              fill="#E64E5B" />
            <path
              d="M34.5417 31.0468C35.2203 30.6675 35.8616 30.3091 36.4628 29.9157C39.344 28.0313 40.6855 25.7857 40.6855 22.8458C40.6855 18.3197 36.8808 15.5379 33.3013 15.2159C32.8609 15.176 32.2834 15.1865 31.9503 15.4875C31.6171 15.7885 31.5513 16.3667 31.5329 16.8245C31.4393 19.1772 29.6072 20.9544 27.6651 22.8346C25.7651 24.6756 23.802 26.5788 23.4098 29.2045C22.8391 33.032 24.885 35.2741 26.1553 36.2694C26.5318 36.565 26.9918 36.7251 27.4649 36.7251C27.6342 36.7249 27.803 36.7045 27.9677 36.6642C28.2785 36.5891 28.5692 36.4437 28.8188 36.2385C29.0684 36.0333 29.2707 35.7735 29.4111 35.4778C30.4228 33.3505 32.5169 32.1794 34.5417 31.0468Z"
              fill="#E64E5B" />
            <path
              d="M24.1162 25.0396C24.9454 23.9364 25.9483 22.962 26.9234 22.0191C28.2751 20.7087 29.4891 19.5286 30.0788 18.249C29.2482 17.7331 28.2222 17.4538 26.9227 17.4538C25.7156 17.4538 25.5391 17.8164 25.5391 18.788C25.5391 19.6672 25.096 20.2257 24.5661 20.9334C23.9791 21.7167 23.3141 22.6036 23.3141 23.9385C23.3141 24.6546 23.4016 25.2524 23.5991 25.7843C23.7574 25.5361 23.9298 25.2878 24.1162 25.0396Z"
              fill="#E64E5B" />
            <path
              d="M37.0443 30.8614C36.4112 31.2757 35.755 31.6425 35.0595 32.031C33.0977 33.1286 31.2452 34.1646 30.3855 35.9706C30.3421 36.063 30.3007 36.1455 30.2579 36.2232C30.2204 36.2921 30.1974 36.3684 30.1905 36.4471C30.1836 36.5258 30.193 36.6051 30.2179 36.6798C30.2428 36.7545 30.2828 36.823 30.3352 36.8806C30.3876 36.9382 30.4512 36.9838 30.5219 37.0142C31.3572 37.3712 32.2271 37.5931 33.1622 37.5931C35.1424 37.6066 37.0487 36.8182 38.4713 35.3973C39.1766 34.6915 39.7363 33.8459 40.1168 32.9114C40.4973 31.9769 40.6907 30.9727 40.6855 29.9591C40.6851 29.607 40.6549 29.2557 40.5953 28.9091C40.5777 28.8059 40.5325 28.7098 40.4647 28.6319C40.3969 28.5539 40.3092 28.4971 40.2117 28.4679C40.1141 28.4387 40.0106 28.4384 39.9129 28.4669C39.8152 28.4954 39.7271 28.5516 39.6588 28.6291C38.9681 29.432 38.1029 30.1691 37.0443 30.8614Z"
              fill="#E64E5B" />
          </g>
          <defs>
            <clipPath id="clip0_2779_25587">
              <rect width="64" height="64" fill="white" />
            </clipPath>
          </defs>
        </svg>

        <div class="statics-title">Number of Votes Received</div>
        <div class="statics-number">{{ staticsData.vote_received_count }}</div>
        <div
          class="statics-desc"
          :class="{ highlight: isTopGreaterThanTen(staticsData.vote_received_top) }">
          {{ staticsData.vote_received_top ? `Top ${staticsData.vote_received_top}` : '' }}
        </div>
      </div>

      <!-- 获奖统计 -->
      <div class="statics-item">
        <svg
          width="64"
          height="64"
          viewBox="0 0 64 64"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_2779_18148)">
            <circle cx="32" cy="32" r="32" fill="#F5EBD6" />
            <path
              d="M39.9932 16C40.5982 16.0001 41.179 16.2397 41.6074 16.667C42.0359 17.0944 42.2768 17.6751 42.2783 18.2803V19.1426C42.2783 19.2183 42.3088 19.2912 42.3623 19.3447C42.4159 19.3983 42.4887 19.4287 42.5645 19.4287H46.8574C47.1604 19.4288 47.4508 19.5494 47.665 19.7637C47.8793 19.978 48 20.2683 48 20.5713V21.7139C48 25.6089 45.857 29.7465 42.5342 30.668C42.436 30.6953 42.3472 30.749 42.2773 30.8232C42.2075 30.8974 42.159 30.9893 42.1377 31.0889C41.7256 33.0095 40.4578 34.8389 38.4658 36.3467C36.9722 37.4774 35.1903 38.3098 33.5889 38.667C33.4625 38.6954 33.3496 38.7662 33.2686 38.8672C33.1874 38.9684 33.1427 39.0949 33.1426 39.2246V45.4287C33.1426 45.5044 33.173 45.5773 33.2266 45.6309C33.2801 45.6844 33.353 45.7139 33.4287 45.7139H37.7139C37.8685 45.7139 38.0219 45.7458 38.1641 45.8066C38.3063 45.8676 38.4353 45.9564 38.542 46.0684C38.6487 46.1803 38.7312 46.3131 38.7852 46.458C38.8392 46.603 38.8629 46.7576 38.8555 46.9121C38.8248 47.527 38.2974 47.9998 37.6826 48H26.2861C26.1314 48 25.9781 47.9681 25.8359 47.9072C25.6937 47.8463 25.5647 47.7575 25.458 47.6455C25.3514 47.5336 25.2688 47.4007 25.2148 47.2559C25.1609 47.1109 25.1371 46.9562 25.1445 46.8018C25.1754 46.1871 25.7027 45.7141 26.3174 45.7139H30.5713C30.647 45.7139 30.7199 45.6844 30.7734 45.6309C30.827 45.5773 30.8574 45.5044 30.8574 45.4287V39.2246C30.8573 39.0949 30.8126 38.9684 30.7314 38.8672C30.6504 38.7662 30.5375 38.6954 30.4111 38.667C28.8097 38.3113 27.0278 37.4774 25.5342 36.3467C23.5422 34.8389 22.2744 33.0095 21.8623 31.0889C21.841 30.9893 21.7925 30.8974 21.7227 30.8232C21.6528 30.749 21.564 30.6953 21.4658 30.668C18.143 29.7465 16 25.6089 16 21.7139V20.5713C16 20.2683 16.1207 19.978 16.335 19.7637C16.5492 19.5494 16.8396 19.4288 17.1426 19.4287H21.4404C21.5162 19.4287 21.589 19.3983 21.6426 19.3447C21.6962 19.2911 21.7266 19.2184 21.7266 19.1426V18.2988C21.728 17.6944 21.969 17.1148 22.3965 16.6875C22.824 16.2603 23.4034 16.0197 24.0078 16.0186L39.9932 16ZM31.999 20.7998C31.9317 20.7999 31.866 20.8229 31.8115 20.8652C31.7568 20.9078 31.7162 20.9682 31.6953 21.0371L30.7266 24.2285H27.5195C27.4513 24.2287 27.3849 24.2525 27.3301 24.2959C27.2752 24.3394 27.234 24.4008 27.2139 24.4707C27.1939 24.5404 27.1953 24.6157 27.2178 24.6846C27.2403 24.7535 27.2826 24.8132 27.3389 24.8545L29.9395 26.7637L28.9365 29.9473C28.9148 30.0161 28.9132 30.0908 28.9336 30.1602C28.954 30.2295 28.9951 30.2899 29.0498 30.333C29.1044 30.3761 29.1704 30.4001 29.2383 30.4004C29.3059 30.4006 29.3719 30.3774 29.4268 30.335L31.999 28.3369L34.5723 30.335C34.6269 30.3768 34.6926 30.3997 34.7598 30.3994C34.8104 30.3993 34.8603 30.3861 34.9053 30.3613C34.9504 30.3364 34.99 30.3001 35.0195 30.2559C35.0491 30.2117 35.0677 30.1602 35.0752 30.1064C35.0826 30.0527 35.0787 29.9978 35.0625 29.9463L34.0596 26.7637L36.6611 24.8555C36.7175 24.8141 36.7598 24.7537 36.7822 24.6846C36.8046 24.6155 36.8063 24.5405 36.7861 24.4707C36.7659 24.4008 36.725 24.3393 36.6699 24.2959C36.6149 24.2525 36.5478 24.2295 36.4795 24.2295H33.2725L32.3037 21.0371C32.2829 20.9682 32.2422 20.9078 32.1875 20.8652C32.1329 20.8228 32.0665 20.7998 31.999 20.7998ZM18.5762 21.7139C18.5379 21.7139 18.5001 21.7224 18.4648 21.7373C18.4295 21.7523 18.3968 21.7741 18.3701 21.8018C18.3435 21.8294 18.3232 21.8626 18.3096 21.8984C18.2959 21.9343 18.2896 21.9724 18.291 22.0107C18.3474 23.6507 18.8534 25.2921 19.7041 26.5557C20.0177 27.0214 20.5533 27.6827 21.2861 28.1191C21.3294 28.1441 21.3787 28.1572 21.4287 28.1572C21.4786 28.1572 21.528 28.144 21.5713 28.1191C21.6145 28.0942 21.6507 28.0587 21.6758 28.0156C21.7009 27.9724 21.7137 27.923 21.7139 27.873C21.7139 26.2052 21.7183 23.9607 21.7197 22C21.7197 21.9242 21.6893 21.8514 21.6357 21.7979C21.5822 21.7443 21.5094 21.7139 21.4336 21.7139H18.5762ZM42.5674 21.7139C42.4919 21.714 42.4197 21.7445 42.3662 21.7979C42.3126 21.8514 42.2822 21.9242 42.2822 22C42.2858 23.8271 42.2861 25.9785 42.2861 27.8721C42.2862 27.9221 42.2992 27.9713 42.3242 28.0146C42.3493 28.058 42.3853 28.0941 42.4287 28.1191C42.4721 28.1441 42.5212 28.1572 42.5713 28.1572C42.6213 28.1572 42.6705 28.1441 42.7139 28.1191C43.4467 27.6827 43.9823 27.0214 44.2959 26.5557C45.1466 25.2921 45.6545 23.6507 45.7109 22.0107C45.7124 21.9725 45.706 21.9342 45.6924 21.8984C45.6787 21.8625 45.6575 21.8294 45.6309 21.8018C45.6043 21.7742 45.5724 21.7523 45.5371 21.7373C45.5017 21.7223 45.4632 21.7138 45.4248 21.7139H42.5674Z"
              fill="#CA9A30" />
          </g>
          <defs>
            <clipPath id="clip0_2779_18148">
              <rect width="64" height="64" fill="white" />
            </clipPath>
          </defs>
        </svg>

        <div class="statics-title">Number of Designs Entering Leaderboard</div>
        <div class="statics-number">{{ staticsData.winner_count }}</div>
        <div
          class="statics-desc"
          :class="{ highlight: isTopGreaterThanTen(staticsData.winner_top) }">
          {{ staticsData.winner_top ? `Top ${staticsData.winner_top}` : '' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import { ActivityAPI } from '@/api/activity';
  import { ArcadeTabsEM, StaticsVO } from '@/types/activity';
  const props = defineProps<{
    uid: string;
  }>();
  // 存储用户活动统计数据
  const staticsData = ref<StaticsVO>();

  watch(
    () => props.uid,
    (newVal: string) => {
      loadUserActivityStatics();
    }
  );

  // 加载用户活动统计数据
  const loadUserActivityStatics = async () => {
    // 使用当前登录用户的ID或传入的uid
    const result = await ActivityAPI.getUserActivityStatics({ uid: props.uid });
    staticsData.value = result.data;
  };

  // 判断Top数值是否超过10%
  const isTopGreaterThanTen = (top: string | undefined): boolean => {
    if (!top) return false;
    // 提取数字部分并转换为数字
    const percentage = parseFloat(top.replace('%', ''));
    return percentage > 10;
  };

  // 组件挂载时加载数据
  onMounted(() => {
    loadUserActivityStatics();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/mixins' as *;

  .arcade-statics {
    padding: 40px 112px;
    .statics-grid {
      display: flex;
      // flex-wrap: wrap;
      gap: 20px;
    }

    .statics-item {
      flex-shrink: 0;
      width: 280px;
      padding: 24px;
      background-color: #fff;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0px 2px 24px 0px #64829f40;
      }

      .statics-title {
        font-size: 16px;
        font-weight: 500;
        color: #7a7a7a;
        margin-top: 16px;
        margin-bottom: 16px;
        text-align: center;
        height: 48px;
      }

      .statics-number {
        font-size: 48px;
        font-weight: 600;
        color: #222222;
        margin-bottom: 16px;
        line-height: 1;
      }

      .statics-desc {
        font-size: 16px;
        text-align: center;
        color: #f76b1b;
      }

      // 添加主题色高亮样式
      .statics-desc.highlight {
        color: #7a7a7a;
      }
    }
  }
</style>
